import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export function useObserver (apiFn) {
// 基本使用监听视口函数
  const target = ref(null)
  // 调用方法：
  // stop方法，用来停止对于目标元素的监听
  // 、target要监听的一个对象，dom对象组件实例对象
  // isIntersecting布尔值，代表当前监听的元素对象是否进入到视口区域，进来就为true,出去为false
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        apiFn()// 发起ajax请求

        stop()// 执行完毕之后停止监听
      }
    },
    { threshold: 0 }// 进入可视比例是多少才执行回调函数，0-1值越大，代表需要进入的面积越大
  )
  return {
    target
  }
}
// 抽离通用逻辑
